﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="PaymentAllocation.aspx.cs" Inherits="CRMWeb.Pages.AM.PaymentAllocation" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link rel="stylesheet" id="newtheme" type="text/css" href="/EasyUI/Themes/metro-red/easyui.css" />
    <link rel="stylesheet" type="text/css" href="/EasyUI/Themes/icon.css" />
    <link rel="stylesheet" type="text/css" href="/Css/CrmStyle.css" />
    <script type="text/javascript" src="/Scripts/jquery-1.8.0.min.js"></script>
    <script type="text/javascript" src="/EasyUI/jquery.easyui.min.js"></script>
    <style type="text/css">
        .same_width {
            width: 45%;
            float: left;
            height: 200px;
            margin-top: 5px;
            margin-left: 1%;
        }

            .same_width label {
                width: 150px;
                margin-left: 20px;
            }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <div class="easyui-panel" style="width: 950px; height: 500px" id="pnlMain" title="Manual Payment Allocation">
            <div class="form_field">
                <div class="same_width">
                    <div class="fitem">
                        <label>Date of Payment :</label>
                        <input id="txtPaymentDate" class="easyui-datebox" type="text" />
                    </div>
                    <div class="fitem">
                        <label>Amount of Payment :</label>
                        <input id="txtPaymentAmount" class="easyui-numberbox" type="text" />
                    </div>
                    <div class="fitem">
                        <label>Method of Payment :</label>
                        <input id="cmbPaymentMethod" class="easyui-combobox" type="text" />
                    </div>
                    <div class="fitem">
                        <label>Allocated Total :</label>
                        <input id="txtTotal" class="easyui-numberbox" type="text" />
                    </div>
                    <div class="fitem">
                        <span style="display: inline-block; margin-left: 20px">Are you 100% sure that </br>allocation was done correctly ?</span>
                        <input id="chk" type="checkbox" />

                    </div>
                    <div class="fitem">
                        <label></label>
                        <a id="btnSubmit" href="javascript:void(0)" onclick="SubmitChanges()" class="easyui-linkbutton" iconcls="icon-ok">Submit </a>

                    </div>

                </div>
                <div class="same_width">
                    <table id="dg" style="width: 350px;" autorowheight="true" fitcolumns="true" singleselect="true">
                        <thead>
                            <tr>
                                <th field="Date" width="50">Date</th>
                                <th field="PayoutFigure" width="30">Payout Figure</th>
                                <th field="Allocation" width="30">Allocation</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
            <div class="form_field">
                <div class="same_width">
                    <table id="dgArrearsHistory" title="Arrears History" style="width: 400px;" autorowheight="true" fitcolumns="true" singleselect="true">
                        <thead>
                            <tr>
                                <th field="No" width="20">No</th>
                                <th field="DefaultDate" width="50">Date of Default</th>
                                <th field="Amount" width="30">Amount</th>
                                <th field="Allocation" width="30">Allocation</th>
                            </tr>
                        </thead>
                    </table>
                </div>
                <div class="same_width">
                    <table id="dgPaymentSchedule" title="Payment Schedule" style="width: 400px;" autorowheight="true" fitcolumns="true" singleselect="true">
                        <thead>
                            <tr>
                                <th field="No" width="20">No</th>
                                <th field="PaymentDate" width="50">Date of Payment</th>
                                <th field="Amount" width="30">Amount</th>
                                <th field="Allocation" width="30">Allocation</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>

        </div>
    </form>
    <script type="text/javascript">
        $('#dgArrearsHistory').datagrid({
            data: []
        });
        $('#dgPaymentSchedule').datagrid({
            data: []
        });
        $('#dg').datagrid({
            data: []
        });

    </script>
</body>
</html>
